<template>
  <!-- outer开始   start -->
    <div class="outer">
        <header>
            <div class="top">
                <div class="shortcut w">
                    <div class="head_left" v-if="!getName.nickName">
                                <span>京东欢迎您!</span>
                                <p>
                                    <i>请</i>
                                    <router-link :to="{
                                        name:'login',
                                    }">登录</router-link>
                                    <!-- <router-link to="/Login">登录</router-link> -->
                                    <!-- <a href="">登录</a> -->
                                    <span class="spacer"></span>
                                    <!-- <a href="">免费注册</a> -->
                                    <router-link to="/Register">免费注册</router-link>
                                </p>
                    </div>
                    <div class="head_left" v-else>
                                <span>{{getName.nickName}}欢迎您!</span>
                                <p>
                                    <a href.prevent="" @click="OutLogin">退出登录</a>
                                </p>
                    </div>
                    <div class="head_right">
                        <ul>
                            <li>
                                <div>
                                    <router-link to='/myorder'>我的订单</router-link>
                                    <!-- <a href=""></a> -->
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li class="head_spacer">
                                <div class="font_icon">
                                    <a href="">我的京东</a>
                                    <i class="iconfont icon-xiangxia"></i>
                                </div>               
                            </li>
                            <li class="spacer"></li>
                             <li>
                                <div>
                                    <router-link to='/Cart'>我的购物车</router-link>
                                    <!-- <a href=""></a> -->
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li>
                                <div>
                                    <a href="">京东会员</a>
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li class="head_spacer">
                                <div class="font_icon">
                                    <a href="" class="red">企业采购</a>
                                    <i class="iconfont icon-xiangxia"></i>
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li class="head_spacer">
                                <div class="font_icon">
                                    <a href="">客服服务</a>
                                    <i class="iconfont icon-xiangxia"></i>
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li class="head_spacer">
                                <div class="font_icon">
                                    <a href="">网站导航</a>
                                    <i class="iconfont icon-xiangxia"></i>
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li>
                                <div>
                                    <a href="">手机京东</a>
                                </div>
                            </li>
                            <li class="spacer"></li>
                            <li>
                                <div>
                                    <a href="">网站无障碍</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="bootom w">
                <div class="logo">
                    <router-link to="/Home">
                        <img src="./img/logo.png" alt="">
                    </router-link>
                    <!-- <a href="">
                        <img src="./img/logo.png" alt="">
                    </a> -->
                </div>
                <div class="serch">
                    <form action="" class="serch_form">
                        <!-- keyword获取input输入的数据（双向绑定 v-model） -->
                        <input type="text" class="serch_text" v-model="keyword">
                        <input type="button" value="搜索" class="serch_button" @click="to_Search">
                    </form>
                </div>
            </div>
        </header>
    </div>
    <!-- outer结束    end -->
</template>

<script>
export default {
    name:"Header",
    data() {
        return {
            // Serach输入框的数据   keyword变量
            keyword:""
        }
    },
    mounted() {
            // 接收Serch组件发送的数据
            // $on('emit通信暗名',接收的方法)
            this.$bus.$on('to_query',this.Set_query)
        },
    methods: {

        // 编程路由导航   去Search页面
        to_Search(){
            // 定义一个跳转到Search数据
            let Go_axios = {
                  name:'search',
                params:{
                    keyword:this.keyword || undefined     //加入  || undefined  可以解决空串问题
                }
            }
            // 判断客户点击Nav   如果点击了则把数据给定义的数据
            if(this.$route.query){
                Go_axios.query = this.$route.query;
            }
            this.$router.push(Go_axios);  
            //点击搜索按钮 把输入框数据变成 空数据
            this.keyword = '' 
        },

        // 接收 Serch组件 $emit发送的数据 方法
        Set_query(value){
            this.$router.push({
                name:'search',
                query:value
            })
        },

        //退出登录
       async OutLogin(){
           try {
              await this.$store.dispatch('user/loginout')
               this.$router.push('/Home')
           } catch (error) {
               console.log(error);
           }
        }

    },
    computed: {
        getName(){
            return this.$store.state.user.info
        }
    },
}
</script>

<style scoped lang='less'>
// outer开始   start
.outer{
    width: 100%;
    .top{ 
        height: 30px;
        line-height: 30px;
        background-color: #eaeaea;
        .shortcut{
            display: flex;
            justify-content: space-between;
            .head_left{
                display: flex;
                p{
                    margin-left: 12px;
                    display: flex;
                    i{
                        margin-right: 4px;
                    }
                    a{
                        cursor: pointer;
                    }
                }
            }
            .head_right{
                ul{
                   display: flex; 
                   .head_spacer{
                        .font_icon{
                            position: relative;
                            padding-right: 18px;
                            i{
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                line-height: 18px;
                                right: -2px;
                                width: 18px;
                                height: 18px;
                                font-size: 18px;
                            }
                    }
                   }
                }
            }
        }
        
    }
    .bootom{
        display: flex;
        justify-content: space-between;
        .logo{
            margin: 25px 45px;
        }
        .serch{
            margin-top: 35px;
            .serch_form{
                display: flex;
                height: 32px;
                .serch_text{
                    box-sizing: border-box;
                    text-indent: 6px;
                    width: 490px;
                    border: 2px solid #ea4a36;
                }
                .serch_button{
                    width: 68px;
                    background-color: #ea4a36;
                    border: none;
                    color: #fff;
                    cursor: pointer;
                }
            }
            
        }
    }
    a:hover{
        color: red;
    }
}
// outer结束   end
</style>